<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/recommend/recommend.css">
  <script src="/public/jQuery.min.js"></script>
  <title>营地推荐</title>
</head>

<body>
  <div id="recommend">
    <div class="header">
      <header>
        {include  file="component/header" /}
      </header>
      <div class="searcho">
        <div class="seacontent">
          <input type="text" placeholder="输入你想去的地方" class="seainput">
          <button class="seabut">
            <img src="/img/pcindex/search.png" alt="" class="seabutimg">
            <p class="seatit"><a href="#">搜索</a></p>
          </button>
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="reco">
      <!-- 搜索发现 -->
      <div class="activeo">
        <div class="titlebox">
          <p class="title-tit">
            搜索发现
          </p>
          <p class="title-p">
            ACTIVITIES
          </p>
        </div>
        <div class="actbutbox">
          {foreach name = "search_type" item = "v"}
          <button class="rollbut active" data-tab="rolltab{$v.id}" onclick="openroll('rolltab{$v.id}')">{$v.title}</button>
          {/foreach}
        </div>
        <!-- 选项卡内容 -->
        {foreach name="search_type" item="v"}
        <div class="rolltab" id="rolltab{$v.id}">

          <div class="overseas">
            {foreach name="search" item="vv"}
            {if condition="$vv.type_id == $v.id"}
            <div class="osson">
              <div class="ossonleft">
                <img src="{$vv.image}" alt="">
              </div>
              <div class="ossonright">
                <p class="osrp">{$vv.title}</p>
                <p class="osrtext">{$vv.content}</p>
                <div class="osrtetail">
                  <a href="#">详细 ></a>
                </div>
              </div>
            </div>
            {/if}
            {/foreach}
          </div>

        </div>
        {/foreach}
        <!-- 选项卡内容 -->
      </div>
      <!-- 搜索发现 -->
      <!-- 热门活动 -->
      <div class="hotbox">
        <div class="titlebox">
          <p class="title-tit">热门活动</p>
          <p class="title-p">ACTIVITIES</p>
        </div>
        <div class="hotbody">
          {foreach name = "activity" item = "v"}
          <div class="hotimg">
            <img src="{$v.image}" alt="" >
          </div>
          {/foreach}
          <div class="hotcenter">
            <p>VIEW DEALS</p>
          </div>
        </div>
        <div class="hotto">
          <button class="hotbut"><a href="#">查看更多 ></a></button>
        </div>
      </div>
      <!-- 热门活动 -->
      <!-- 营地榜单 -->
      <div class="camplist">
        <div class="titlebox">
          <p class="title-tit">
            营地榜单
          </p>
          <p class="title-p">
            ACTIVITIES
          </p>
        </div>
        <div class="listbody">
          <div class="listleft">
            <img src="{$activity[3]['image']}" alt="">
          </div>
          <div class="listright">
            {foreach name = "campList" item = "v"}
            <p class="lrp">
              <span class="lrpnum">{$v.id}</span>
              <span class="lrptext">{$v.title}</span>
            </p>
            {/foreach}
          </div>
        </div>
      </div>
      <!-- 营地榜单 -->
      <!-- 寻找营地 -->
      <div class="find">
        <div class="findleft">
          <img src="{$web[0]['logo']}" alt="">
          <p class="findtit">{$web[0]['title']}</p>
        </div>
        <div class="findright">
          <div class="frtop">
            <p>在这里寻找绝佳露营地</p>
            <p class="frtopp">成为自己的人生赢家</p>
          </div>
          <div class="frbot">
            <img src="/img/commend/imgbot.png" alt="">
          </div>
        </div>
      </div>
      <!-- 寻找营地 -->
    </div>
    <!-- 内容 -->
    <div class="footer">
      <footer>
        {include  file="component/footer" /}
      </footer>
    </div>
  </div>


  <script>
    // 选项卡切换
    function openroll(tabName) {
      var rolltabs = document.getElementsByClassName("rolltab");
      for (var i = 0; i < rolltabs.length; i++) {
        rolltabs[i].style.display = "none";
      }

      var rollbuttons = document.getElementsByClassName("rollbut");
      for (var i = 0; i < rollbuttons.length; i++) {
        rollbuttons[i].classList.remove("active");
      }

      document.getElementById(tabName).style.display = "block";
      document.querySelector(".rollbut[data-tab='" + tabName + "']").classList.add("active");
    }
    // 初始显示第一个选项卡
    openroll("rolltab1");

    // 选项卡切换
  </script>
</body>

</html>
